<template>
  <div>
    <el-dialog title="选择课程"
      :visible.sync="dialogVisible"
      width="70%" top="5vh">

      <el-container style="height:71vh; margin-top:-30px;margin-bottom:-30px;">
          <el-header>
            <div style="display: flex;justify-content: flex-end;">
              <el-input v-model="from.title" placeholder="标题" size="normal" clearable style="width: 200px;margin-right: 10px;"></el-input>
              <el-button type="primary" size="small" @click="handleFilter">搜索</el-button>
            </div>
          </el-header>
          <el-container>
            <el-aside width="160px" class="aside">
              <el-menu :default-active="key" @select="onAsideSelect" style="height:60vh;background-color:#fbfbfb;border:0;">
                <el-menu-item class="txt" :index="item.index" :key="index" v-for="(item, index) in menus">{{item.name}}</el-menu-item>
              </el-menu>

            </el-aside>
            <el-container>
                <el-main class="main">
                  <el-table
                    v-loading="listLoading"
                    :data="list"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%;"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>

                    <el-table-column label="内容" min-width="150px">
                      <template slot-scope="{row}">
                        <div style="display: flex;">
                          <img src="../../assets/login.gif" style="width:100px;height:50px;margin-right:10px;">
                          <div style="display:flex;flex-direction:column;justify-content:span-between;">
                            <span>{{ row.title }}</span>
                            <span style="color:red;">￥{{ row.price }}</span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-main>
                <el-footer>
                  <pagination :total="total" :page.sync="from" :limit.sync="from.limit"
                    @pagination="getData" style="padding:0;padding-top:10px;margin:0;" layout="total,prev,pager,next"/>
                </el-footer>
            </el-container>
          </el-container>
      </el-container>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
let M = {} 
function importAll(r) {
  r.keys().forEach(key => M[key] = r(key))
  importAll(require.context('@/api/',true, /\.js$/))
}
import { fetchList, createMedia, updateMedia, deleteMedia } from '@/api/media'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      key: 'media',
      menus: [{
        name:'图文',
        index:'medis'
      },{
        name:'音频',
        index:'audio'
      },{
        name:'视频',
        index:'video'
      }],
      dialogVisible: false,
      from: {
        title: '',
        page: 1,
        limit: 10
      },
      tablekey: 0,
      listLoading: true,
      list: [],
      total: 100,
      multipleSelection: [],
      callback: null,
      limit: -1
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      let fetchList = M['./${this.key}.js'].fetchList

      fetchList(this.from).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    open(callback, limit = -1) {
      this.dialogVisible = true
      this.getData()
      this.limit = limit
      this.callback = callback
    },
    close() {
      this.dialogVisible = false
    },
    confirm() {
      if (this.multipleSelection.length === 0) {
        return this.$message.error('至少选中一个')
      }
      if (this.limit != -1 && this.multipleSelection.length > this.limit) {
        return this.$message.error('最多可以选中'+this.limit+'个')
      }
      this.callback(this.multipleSelection)
      this.close()
      // 清空选中
      this.$refs.multipleTable.clearSelection()
    },
    handleFilter() {

    },
    onAsideSelect() {
      this.key = 0
      this.from.page = 1
      this.getData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>
  .aside {
    height: 60vh;
    background-color:#fbfbfb;
    border: 1px solid #eeeeee;
    height: 45vh;
    padding: 0;
    overflow-y: auto;
  }
  .main {
    height: 45vh;
    padding: 0;
    overflow-y: auto;
  }
  /* .aside,.text {
    display: flex;
   justify-content: center; 
  } */
</style>
